<template>
  <div class="views_BOX">
    <vue-scroll ref="vs" :ops="$store.state.ops">
      <!-- 选择物流服务  start -->
      <div class="view_title FSBC">
        <div class="view_title_text">选择物流服务</div>
        <div>
          <el-button class="baseTextBut" type="text" icon="el-icon-arrow-left" @click="backClick">返回</el-button>
        </div>
      </div>
      <div class="table_box">
        <el-table
          :data="serveList"
          size="medium"
          header-row-class-name="table_box_header"
          style="width: 100%"
        >
          <el-table-column prop="name" align="center" label="公司名称"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <div class="BOX FCC">
                <el-button
                  class="baseBut bg_base"
                  type="primary"
                  @click="serveClick(scope.row ,scope.$index)"
                >选择</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="deliverServeBut_box FSBC">
        <div class="view_title_text"></div>
        <div>
          <el-button class="baseTextBut" type="text" @click="serveClick('All')">
            更多快递
            <i class="el-icon-arrow-right"></i>
          </el-button>
        </div>
      </div>
      <!-- 选择物流服务  end -->

      <!-- 确认发货信息  start -->
      <div class="view_title FSBC">
        <div class="view_title_text">确认发货信息</div>
        <div></div>
      </div>
      <div class="table_box">
        <el-table
          :data="infoList"
          size="medium"
          header-row-class-name="table_box_header"
          style="width: 100%"
        >
          <el-table-column prop="date" align="center" label="发货人"></el-table-column>
          <el-table-column prop="date" align="center" label="联系方式"></el-table-column>
          <el-table-column prop="date" align="center" label="发货地址"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope" class="FCC">
              <div class="BOX FCC">
                <el-button
                  class="baseBut bg_base mgr_10"
                  type="primary"
                  @click="infoClick(scope.row,1)"
                >选择</el-button>
                <el-button
                  class="baseBut bg_gray mgl_10"
                  type="primary"
                  @click="infoClick(scope.row,2)"
                >更换</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 确认发货信息  end -->

      <!--  订单批量操作 start -->
      <div class="view_title FSBC">
        <div class="view_title_text">订单批量操作</div>
        <div></div>
      </div>
      <div class="table_box">
        <el-table
          :data="expressList"
          size="medium"
          header-row-class-name="table_box_header"
          style="width: 100%"
        >
          <el-table-column prop="date" align="center" label="订单编号"></el-table-column>
          <el-table-column align="center" label="物流单号">
            <template slot-scope="scope">
              <div class="BOX FCC">
                <el-input class="w_age_80" v-model="paramsForm.userName" placeholder="请输入物流单号"></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 订单批量操作  end -->
      <div class="view_but FSBC">
        <div class="view_title_text"></div>
        <div class="view_but_lr F">
          <el-button class="baseBorderBut w_132 mgr_10" @click="expresssClick()">批量生成电子面单</el-button>
          <el-button
            class="baseBut w_132 bg_base mgl_10"
            type="primary"
            @click="confirmClick(scope.row)"
          >批量发货</el-button>
        </div>
      </div>
    </vue-scroll>
    <!--  更多快递 start -->
    <el-dialog title="更多快递" :visible.sync="isServeDialog" width="708px">
      <div class="disposeDialog_box">
        <div class="form_Dialog_box check_box">
          <el-checkbox-group v-model="checkServeList" @change="changeServeList">
            <el-checkbox
              v-for="(item, index) in checkServeAllList"
              :key="index"
              :label="item.expressCompany"
              :disabled="disabledServe == item.expressCompany"
            ></el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="butDialog_box FCC">
          <el-button class="baseBut bg_base" type="primary" @click="checkServeClick">确定</el-button>
        </div>
      </div>
    </el-dialog>
    <!--  更多快递 end -->
  </div>
</template>
<script>
import { getExpressFindAll } from "../../../../requestApi/order/order";
export default {
  components: {},
  data() {
    return {
      paramsForm: {
        userName: ""
      },
      serveList: [],
      infoList: [],
      expressList: [],
      isServeDialog: false,
      checkServeList: [],
      checkServeAllList: [],
      isDisabledServe: false,
      serveIndex: 0,
      disabledServe: ""
    };
  },
  created: function() {},
  mounted() {
    this.getExpressFindAllFun();
  },
  computed: {},
  methods: {
    /* 获取物流公司  start */
    async getExpressFindAllFun() {
      let self = this;
      let res = await getExpressFindAll({});
      self.checkServeAllList = [];
      if (res.status == 200) {
        if (res.data) {
          self.checkServeAllList = res.data;
        }
      } else {
        this.baseMessage(res);
      }
    },
    /* 获取物流公司  end */
    /* 选择快递  start */
    checkServeClick() {
      if (this.isDisabledServe) {
        let label = this.checkServeList[this.checkServeList.length - 1];
        this.serveList[this.serveIndex].name = label;
        this.isServeDialog = false;
      } else {
        if (this.checkServeList.length) {
          this.serveList = this.checkServeList.map(e => {
            return {
              name: e
            };
          });
          this.isServeDialog = false;
        } else {
          this.$message({
            type: "info",
            message: "请选择！"
          });
        }
      }
    },
    changeServeList() {
      if (this.isDisabledServe) {
        let label = this.checkServeList[this.checkServeList.length - 1];
        this.checkServeList = [];
        this.checkServeList = [this.disabledServe, label];
      }
    },
    /* 选择快递  end */
    /* 发货  start */
    confirmClick() {},
    /* 发货  end */
    /* 批量成成快递单  start */
    expresssClick() {
      this.$message({
        type: "info",
        message: "订单状态不支持生成电子面单"
      });
    },
    /* 批量成成快递单  end */
    /* 发货信息  start */
    infoClick(item, type) {
      if (type == 1) {
        // 选择
      } else {
        // 更换
      }
    },
    /* 发货信息  end */
    /* 选择快递  start */
    serveClick(item, index) {
      this.disabledServe = "";
      this.checkServeList = [];
      if (item == "All") {
        this.isDisabledServe = false;
        if (this.serveList.length) {
          this.checkServeList = this.serveList.map(e => {
            return e.name;
          });
        }
      } else {
        this.disabledServe = item.name;
        this.serveIndex = index;
        this.checkServeList = [this.disabledServe];
        this.isDisabledServe = true;
      }
      this.isServeDialog = true;
    },
    /* 选择快递  end */
    /* 返回  start */
    backClick() {
      this.$router.go(-1);
    }
    /* 返回  end */
  },
  filters: {},
  watch: {}
};
</script>
<style scoped>
/* 更多快递  start */
.disposeDialog_box {
  width: 100%;
  overflow: hidden;
}
.form_Dialog_box {
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 30px;
  overflow: hidden;
}
.butDialog_box {
  height: 108px;
  width: 100%;
}
/* 更多快递  end */
.view_but {
  height: 52px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 10px;
  overflow: hidden;
  margin-bottom: 50px;
}
.view_but_lr {
  justify-content: flex-end;
  height: 52px;
  align-items: center;
}
.deliverServeBut_box {
  height: 20px;
  width: calc(100% - 40px);
  margin-left: 20px;
  margin-top: 10px;
}
.table_box {
  min-height: 60px;
  width: calc(100% - 40px);
  margin-left: 20px;
}
/* 标题  start */
.view_title {
  height: 62px;
  width: calc(100% - 40px);
  margin-left: 20px;
}
.view_title_text {
  font-size: 16px;
  font-weight: 500;
  color: rgba(42, 41, 40, 1);
}
/* 标题  end */
.views_BOX {
  background-color: #fff;
}
</style>
